<template>
  <!--头像-->
  <div :class="[type == 'rectangle'? 'head-photo-radius':'head-photo-radius-haft','head-photo']" >
    <img :src="imgUrl"  width="100%" :title="title">
  </div>
</template>

<script>
    export default {
        props: {
            imgUrl: {
                type: Object,
                default: () => null
            },
            type: {
                type: String,
                default: () => "circular" // rectangle、circular
            },
            title: {
                type: String,
                default: () => "头像"
            }
        },
        data() {
            return {
                alt: "头像"
            }
        }
    }
</script>

<style scoped>
  .head-photo {
    cursor: pointer;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;
    background-color: #1d2128;
    border: 1px solid rgb(58, 60, 65)
  }
  .head-photo-radius {
    border-radius: 15%;
  }
  .head-photo-radius-haft {
    border-radius: 50%;
  }
  img {
    transform: scale(1.2);
  }
</style>
